<template>
	<view class="exhibitions-container">

		<!-- 展览列表内容 -->
		<view class="exhibition-list">
			<view v-if="loading" class="loading-wrapper">
				<uni-load-more status="loading" :contentText="loadingText"></uni-load-more>
			</view>
			<view v-else-if="exhibitionList.length === 0" class="empty-wrapper">
				<text>暂无展览信息</text>
			</view>
			<view v-else class="exhibition-items">
				<view class="exhibition-item" v-for="item in exhibitionList" :key="item.id" @click="goToDetail(item.id)">
					<image class="exhibition-img" :src="getImageUrl(item.cover)" mode="aspectFill"></image>
					<view class="exhibition-info">
						<view class="exhibition-title">{{item.title}}</view>
						<!-- <view class="exhibition-description">{{item.description | truncate}}</view> -->
						<view class="exhibition-footer">
							<view class="exhibition-time">
								<text>{{formatDate(item.startTime)}} - {{formatDate(item.endTime)}}</text>
							</view>
							<view class="exhibition-status" :class="{'status-active': item.status === 1}">
								{{ item.status === 1 ? '展览中' : '未展览' }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部加载更多 -->
		<view class="load-more" v-if="exhibitionList.length > 0 && hasNextPage">
			<uni-load-more :status="loadMoreStatus" @clickLoadMore="loadMoreExhibitions"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import { getExhibitionList } from '@/api/exhibition.js';
	import { getImageUrl } from '@/api/file.js';
	
	export default {
		data() {
			return {
				exhibitionList: [],
				loading: true,
				activeStatus: 'all',
				page: 1,
				size: 10,
				hasNextPage: false,
				loadMoreStatus: 'more',
				loadingText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中...',
					contentnomore: '没有更多数据了'
				}
			}
		},
		computed: {
			// 根据筛选条件过滤展览
			filteredExhibitions() {
				if (this.activeStatus === 'all') {
					return this.exhibitionList;
				} else {
					return this.exhibitionList.filter(item => item.status === this.activeStatus);
				}
			}
		},
		onLoad() {
			this.loadExhibitionList();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1;
			this.exhibitionList = [];
			this.loadExhibitionList(() => {
				uni.stopPullDownRefresh();
			});
		},
		// 上拉加载更多
		onReachBottom() {
			if (this.hasNextPage) {
				this.loadMoreExhibitions();
			}
		},
		methods: {
			// 加载展览列表
			async loadExhibitionList(callback) {
				this.loading = true;
				try {
					const res = await getExhibitionList({ page: this.page, size: this.size });
					if (res.code === 200 && res.data) {
						const { records, total } = res.data;
						this.exhibitionList = this.page === 1 ? records : [...this.exhibitionList, ...records];
						this.hasNextPage = this.exhibitionList.length < total;
						this.loadMoreStatus = this.hasNextPage ? 'more' : 'noMore';
					} else {
						throw new Error('获取展览列表失败');
					}
				} catch (error) {
					console.error('获取展览列表失败', error);
					uni.showToast({
						title: '获取展览列表失败',
						icon: 'none'
					});
					
					// 使用测试数据（仅在开发环境下）
					if (process.env.NODE_ENV === 'development') {
						this.exhibitionList = [
							{
								id: 1,
								title: '古代文物展',
								cover: '/static/default-cover.png',
								description: '展示中国古代文明的灿烂历史，包括陶器、青铜器、玉器等珍贵文物。',
								startTime: '2023-08-01',
								endTime: '2023-12-31',
								status: 1
							},
							{
								id: 2,
								title: '现代艺术展',
								cover: '/static/default-cover.png',
								description: '展现当代艺术的多元风格与创新表达，汇集国内外知名艺术家作品。',
								startTime: '2023-09-01',
								endTime: '2023-11-30',
								status: 1
							},
							{
								id: 3,
								title: '特别主题展',
								cover: '/static/default-cover.png',
								description: '以"自然与人类"为主题，探索人与自然的和谐共生关系。',
								startTime: '2023-10-01',
								endTime: '2023-12-15',
								status: 1
							}
						];
						this.hasNextPage = false;
						this.loadMoreStatus = 'noMore';
					}
				} finally {
					this.loading = false;
					callback && callback();
				}
			},
			
			// 加载更多展览
			loadMoreExhibitions() {
				if (this.loadMoreStatus === 'loading') return;
				
				this.loadMoreStatus = 'loading';
				this.page++;
				this.loadExhibitionList(() => {
					this.loadMoreStatus = this.hasNextPage ? 'more' : 'noMore';
				});
			},
			
			// 筛选展览
			filterByStatus(status) {
				if (this.activeStatus !== status) {
					this.activeStatus = status;
					this.page = 1;
					this.exhibitionList = [];
					this.loadExhibitionList();
				}
			},
			
			// 跳转到展览详情
			goToDetail(id) {
				uni.navigateTo({
					url: `/pages/exhibition/index?id=${id}`
				});
			},
			
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 格式化日期
			formatDate(dateStr) {
				if (!dateStr) return '';
				const date = new Date(dateStr);
				return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
			},
			
			// Add getImageUrl to methods
			getImageUrl
		}
	}
</script>

<style lang="scss">
	.exhibitions-container {
		min-height: 100vh;
		background-color: #f8f8f8;
		display: flex;
		flex-direction: column;
	}
	
	.custom-navbar {
		position: sticky;
		top: 0;
		z-index: 100;
		height: 90rpx;
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
		
		.navbar-left, .navbar-right {
			width: 80rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}
		
		.navbar-title {
			flex: 1;
			text-align: center;
			font-size: 34rpx;
			font-weight: bold;
			color: #333;
		}
	}
	
	.filter-bar {
		display: flex;
		background-color: #ffffff;
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #eee;
		margin-bottom: 20rpx;
		
		.filter-item {
			padding: 10rpx 30rpx;
			margin-right: 20rpx;
			border-radius: 30rpx;
			font-size: 28rpx;
			background-color: #f5f5f5;
			color: #666;
			
			&.active {
				background-color: #4a6bdf;
				color: #ffffff;
			}
		}
	}
	
	.loading {
		padding: 30rpx 0;
	}
	
	.exhibition-list {
		flex: 1;
		padding: 20rpx;
	}
	
	.empty-wrapper {
		padding: 40rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.empty-icon {
			width: 160rpx;
			height: 160rpx;
			margin-bottom: 20rpx;
		}
		
		text {
			font-size: 28rpx;
			color: #999;
		}
	}
	
	.exhibition-item {
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
		
		.exhibition-img {
			width: 100%;
			height: 360rpx;
		}
		
		.exhibition-info {
			padding: 20rpx;
			
			.exhibition-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 10rpx;
			}
			
			.exhibition-description {
				font-size: 26rpx;
				color: #666;
				line-height: 1.6;
				margin-bottom: 20rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
			
			.exhibition-footer {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.exhibition-time {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #999;
					
					.time-icon {
						width: 28rpx;
						height: 28rpx;
						margin-right: 8rpx;
					}
				}
				
				.exhibition-status {
					padding: 4rpx 16rpx;
					border-radius: 20rpx;
					font-size: 22rpx;
					background-color: #f5f5f5;
					color: #999;
					
					&.status-active {
						background-color: rgba(74, 107, 223, 0.1);
						color: #4a6bdf;
					}
				}
			}
		}
	}
	
	.load-more {
		padding: 20rpx 0 40rpx;
	}
</style> 